body{
  @font12:1.17rem;
  @font16:1.33rem;
  @font18:1.5rem;
  @height45: 3.75rem;
  .index-swiper{
    .slide-one {
      background: url("../images/banner2.jpg") no-repeat center 0;
    }
    .slide-two {
      background: url("../images/banner1.jpg") no-repeat center 0;
    }
    .slide-three {
      background: url("../images/banner3.jpg") no-repeat center 0;
    }
    @media (max-width: 768px){
      .slide-one {
        background: url("../images/mobile-banner2.jpg") no-repeat center 0;
        .qs-swiper-img{
          width:11rem;
          padding:0;
          margin-top:6rem;
          text-align: center;
          img{
            width:100%;
          }
        }
      }
      .slide-two {
        background: url("../images/mobile-banner1.jpg") no-repeat center 0;
        .qs-swiper-img{
          width:11rem;
          margin-top:7rem;
          text-align: center;
          img{
            width:100%;
          }
        }
      }
      .slide-three {
        background: url("../images/mobile-banner3.jpg") no-repeat center 0;
        .qs-swiper-img{
          width:11rem;
          margin-top:6rem;
          text-align: center;
          img{
            width:100%;
          }
        }
      }
    }
    @media (min-width: 768px) and (max-width: 992px){
      .slide-one {
        .qs-swiper-img{
          width:22rem;
          padding:0;
          margin-top:6rem;
          text-align: center;
          img{
            width:100%;
          }
        }
      }
      .slide-two {
        .qs-swiper-img{
          width:24rem;
          margin-top:7rem;
          text-align: center;
          img{
            width:100%;
          }
        }
      }
      .slide-three {
        .qs-swiper-img{
          width:20rem;
          margin-top:6rem;
          text-align: center;
          img{
            width:100%;
          }
        }
      }
    }
    @media (min-width: 992px) and (max-width: 1180px){
      .slide-one {
        .qs-swiper-img{
          width:26rem;
          padding:0;
          margin-top:8rem;
          text-align: center;
          img{
            width:100%;
          }
        }
      }
      .slide-two {
        .qs-swiper-img{
          width:26rem;
          margin-top:9rem;
          text-align: center;
          img{
            width:100%;
          }
        }
      }
      .slide-three {
        .qs-swiper-img{
          width:24rem;
          margin-top:6rem;
          text-align: center;
          img{
            width:100%;
          }
        }
      }
    }
    @media (min-width: 1180px){
      .slide-one {
        .qs-swiper-img{
          text-align: center;
          position: relative;
          .qs-swiper-imgPanel{
            display:inline-block;
            width:42rem;
            position: absolute;
            top:6rem;
            left: 0;
            right: 0;
            margin: auto;
            img{
              width:100%;
            }
          }
        }
      }
      .slide-two {
        .qs-swiper-img{
          text-align: center;
          position: relative;
          .qs-swiper-imgPanel{
            display:inline-block;
            width:50rem;
            position: absolute;
            top:3rem;
            left: 0;
            right: 0;
            margin: auto;
            img{
              width:100%;
            }
          }
        }
      }
      .slide-three {
        .qs-swiper-img{
          text-align: center;
          position: relative;
          .qs-swiper-imgPanel{
            display:inline-block;
            width:30rem;
            position: absolute;
            top:4rem;
            left: 0;
            right: 0;
            margin: auto;
            img{
              width:100%;
            }
          }
        }
      }
    }
  }
  .project{
    width: 100%;
    background-color: #fafafa;
    padding: 40px 0;
    .system{
      background-color: #ffffff;
      text-align: center;
      //width: 295px;
      //height:221px;
      height: 20rem;
      overflow:hidden;
      border:1px solid #f1f1f1;
      margin-left: -1px;
      padding-top: 1.7rem;
      &:hover{
        box-shadow: 0px 0px 4px 2px #eee;
      }
      a{
        width: 100%;
        height: 100%;
        display: block;
        text-decoration: none;
        color: #000;
      }
      .projectName{
        font-size: @font18;
        line-height:1rem;
        font-weight: 300;
      }
      .projectDesc{
        font-weight: 300;
        font-size: @font12;
      }
    }
  }

  @media(min-width: 768px){
    .project{
      .system{
        height:221px;
      }
    }
  }

  @media(max-width: 767px){
    .project{
      .system{
        .retail-img{
          width: 100%;
        }
      }
    }
  }

  .pain-points{
    width: 100%;
    padding:0 10px;
    .pain-points-title{
      font-weight: 400;
      text-align: center;
      font-size: 3.33rem;
      padding-top: 4.17rem;
      color: #333;
      padding-bottom: 1.67rem;
    }
    .tab-horizontal{
      text-align: center;
      margin:0;
      padding:0;
      display: block;
      li{
        border:2px solid #f9f9f9;
        list-style-type: none;
        width: 50%;
        float: left;
        height:@height45;
        line-height: @height45;
        cursor: pointer;
        a{
          text-decoration: none;
          font-size: @font16;
          font-weight: 300;
          color: #000;
        }
      }
      .active{
        border-top:2px solid #439DE2;
      }
    }
    .pain{
      border: 1px solid #f5f5f5;
      .panel-group{
        margin-bottom: 0;
      }
      .table-question{
        font-weight: 300;
        color: #ffffff;
        font-size: @font16;
        text-align: center;
        height:@height45;
        background-color: #439DE2;
        line-height: @height45;
      }
      .table-resolve{
        font-weight: 300;
        color: #ffffff;
        font-size: @font16;
        text-align: center;
        height:@height45;
        background-color: #439DE2;
        line-height: @height45;
        &:before{
          content: "";
          width: 1px;
          height: 2.08rem;
          position: absolute;
          left: 0;
          top: 10px;
          background-color: #fff;
        }
      }
      .question-content{
        font-weight: 300;
        font-size: @font18;
        text-align: left;
        height:8.33rem;
        border:1px solid #f5f5f5;
        background-color: #fafafa;
        color: #000;
        span{
          color: #2d9afa;
        }
        a{
          color: #000;
          width: 100%;
          height: 100%;
          display: block;
          padding: 2.5rem 1.5rem 0;
        }
        @media (min-width: 768px) {
          &.active{
            border-left:2px solid #439DE2;
            border-right:none;
            background-color: #ffffff;
          }
        }
      }
      .resolve-content{
        font-weight: 300;
        padding-top: 3.33rem;
        font-size: @font16;
        text-align: center;
        color: #000;
        display: none;
        img{
          margin-top: 1.66rem;
        }
        &.active{
          display: block;
        }
      }
      .table-sm-resolve{
        //display: none;
        img{
          width: 100%;
        }
        p{
          padding: 1rem 2rem;
        }
      }
      .panel-default{
        margin:0;
        border-radius: 0;
        border:none;
      }
      .ques-bottom{
        height: 8.33rem;
        border:1px solid #f5f5f5;
        background-color: #fafafa;
      }
      .more-ques{
        height:4rem;
        line-height: 4rem;
        text-align: center;
        background-color: #fafafa;
        a{
          font-weight: 300;
          color: #2d9afa;
          text-decoration: none;
        }
      }
    }
  }

  .resolve{
    width: 100%;
    padding: 0 6px;
    margin-top: 6.6rem;
    background-color: #fafafa;
    .swiper-slide{
      .qs-card{
        width: 380px;
      }
    }
    .resolve-title{
      font-weight: 400;
      text-align: center;
      font-size: 3.33rem;
      padding-top: 4.17rem;
      color: #333;
      padding-bottom: 2.5rem;
    }
    .logo{
      display: inline-block;
      margin: 3.5rem 0;
      width: 100%;
      text-align: center;
      li{
        width: 9%;
        display: inline-block;
        text-align: center;
        a{
          display: block;
          @media (min-width: 1024px) {
            img{
              width: 5rem;
            }
          }
          @media (min-width: 768px) and (max-width: 1024px) {
            img{
              width: 4rem;
            }
          }
          @media (min-width: 320px) and (max-width: 767px) {
            img{
              width: 2rem;
            }
          }
        }
      }
    }
    .more{
      text-align: center;
      padding-bottom: 3.5rem;
      a{
        color: #00a0e9;
        border:1px solid #00a0e9;
        background-color: #ffffff;
        &:hover{
          background-color: #fafafa;
        }
      }
    }
  }
  .swiper-button-prev{
    top:50%;
  }
  .swiper-button-next{
    top:50%;
  }
}